<template>
    <a-layout class="layout">
        <a-layout-header>
            <Header @change="onCollapsedChange" />
        </a-layout-header>
        <a-layout>
            <a-layout-sider :collapsed="collapsed">
                <Sider />
            </a-layout-sider>
            <a-layout-content>
                <Content />
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script setup>
import { provide, ref } from 'vue'
import Sider from './Sider/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
const collapsed = ref(false)

const onCollapsedChange = () => {
    collapsed.value = !collapsed.value
}
provide('collapsed', collapsed)
</script>
<style lang="less" scoped>
.layout {
    height: 100%;
    :deep(.ant-layout-sider) {
        background-color: #fff;
    }
    :deep(.ant-layout-header) {
        background-color: #4764e6;
        padding: 0;
    }
}
</style>
